<template lang="pug">
    div(class="tree-hole-hall")
        <!---聊天室头部--->
        PageHeader
            template(v-slot:left)
                span
            template(v-slot:right)
                Icon(type="ios-search-outline" size="26" @click="searchVisible=true")
            template(v-slot:default)
                h4 聊天大厅

        <!---聊天室工具栏--->
        //- div(class="tree-hole-hall-toolbar")
            //- div(class="tree-hole-hall-toolbar__search")
            //- div(class="tree-hole-hall-toolbar-total")
            //-     strong {{paged.total || 0}}
            //-     span 个聊天室
            //-     i(class="tree-hole-hall-toolbar-total__icon")

        <!---聊天室列表--->
        div(class="tree-hole-hall-rooms")
            <!--数据-->
            template(v-if="initialized" v-for="item in roomList" )
                div(class="tree-hole-hall-rooms-room" :key="item.id",
                    @click="joinRoom(item)"
                    :class="{active: item == 2}")
                    div(class="tree-hole-hall-rooms-room__avatar")
                        img(src="https://img.yzcdn.cn/upload_files/2018/12/04/Fs2MKthTfft2XLKQbxIP98sTO5VH.jpg")
                    div(class="tree-hole-hall-rooms-room__info")
                        h2 {{item.roomName}}
                        p
                            span 在线人数
                            span(class="memberCount") {{item.memberCount}}
                            span 人
                    div(class="tree-hole-hall-rooms-room__actions")
            template(v-else v-for="(index,i) in 5" )
                div(class="tree-hole-hall-rooms-room" )
                    div(class="tree-hole-hall-rooms-room__avatar")
                        img(src="https://img.yzcdn.cn/upload_files/2018/12/04/Fs2MKthTfft2XLKQbxIP98sTO5VH.jpg")
                    div(class="tree-hole-hall-rooms-room__info")
                        h2
                            Progress(:percent="99" stroke-color="#dcdee2" status="active") &nbsp;
                        p
                            Progress(:percent="99" stroke-color="#dcdee2" status="active") &nbsp;
            div(v-if="roomList.length === 0", style="text-align:center; padding: 20px;")
                Icon(type="ios-paper-plane-outline" size="50")
                p 当前没有聊天室 您可以创建聊天室
        <!---聊天室底部按钮--->
        div(class="tree-hole-hall-bottom-actions")
            div(class="tree-hole-hall-bottom-actions__white_layer")
            div(class="tree-hole-hall-bottom-actions__plus_mask")
            div(class="tree-hole-hall-bottom-actions__plus_mask2")
            div(class="tree-hole-hall-bottom-actions__plus")
                i(@click="toCreateRoom")

        ActivePanel(:visible="searchVisible" @history-back="searchVisible=false")
            PageHeader(@no="closeSearch" @ok="doSearch") 搜索聊天室
            div(class="weui-cells weui-cells_form")
                WeInput(placeholder="搜索聊天室" focus v-model="search" @change="doSearch")

        Toast(:visible="toastVisible", text="")
        transition(enter-active-class="animated fadeInUp faster" leave-active-class="animated fadeOutDown")
            router-view
</template>
<script>
    import axios from "@/plugin/axios";
    import util from "@/lib/util";
    import WeInput from "@/weui/WeInput";
    import Toast from "@/weui/toast";
    import MsgMixins from "./HomeMixins/MsgMixins";
    import wxHub from "@/lib/WxHub"

    export default {
        components: {WeInput, Toast},
        mixins: [MsgMixins],
        data() {
            return {
                createRoomModal: true,
                roomList: [],
                searchVisible: false,
                search: "",
                toastVisible: false,
                initialized: false, // 是否已初始化
            };
        },
        methods: {
            toCreateRoom() {
                this.$router.push({name: "hall-room-create"});
            },
            getRoomList() {
                const options = {url: "chatRoom/room/roomList", method: "post"};
                axios(options)
                    .then(roomList => (this.roomList = roomList))
                    .catch(() => {
                    }).then(() => {
                    setTimeout(function () {
                        this.initialized = true
                    }.bind(this), 1 * 1000) // 延时两秒显示，不突兀
                });
            },
            joinRoom(room) {
                this.toastVisible = true;
                const data = {roomId: room.roomId};
                const options = {url: "chatroom/room/join", method: "post", data};
                axios(options)
                    .then(r => this.enterRoom(room))
                    .catch(error => {
                        this.$Message.error(error.message);
                    })
                    .then(() => (this.toastVisible = false));
            },
            enterRoom(room) {
                this.$router.push({name: "hall-room", params: {id: room.roomId}});
            },
            closeSearch() {
                history.back();
            },
            doSearch() {
                var items = this.roomList || [];
                this.roomList = items.filter(item => {
                    return item.name && item.name.indexOf(this.search) > -1;
                });
                history.back();
            }
        },
        created() {
            this.getRoomList();
        },
        mounted() {
            const el = document.querySelector(".tree-hole-hall-rooms");
            util.wxH5DragDownForbidden(el);
            const headerEl = document.querySelector(".page-header");
            util.wxH5DragDownForbidden(headerEl);
        }
    };
</script>
<style lang="less" scoped>
@import "./css/Index.less";
</style>
